<!--
 * @Author: wjy
 * @Date: 2021-08-05 09:04:29
 * @LastEditTime: 2021-08-05 14:55:57
 * @LastEditors: Please set LastEditors
 * @Description: 新闻列表网页
 * @FilePath: \xxtx-group-ui\src\views\List.vue
-->

<template>
  <div class="list">
    <!-- 头部 -->
    <Header></Header>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content" v-loading="loading">
      <div class="wrapper">
        <div class="page_title">{{category.name}}</div>
        <div class="inner_content">
          <div class="articles">
            <!-- 文章列表 -->
            <ul v-if="articleData.total > 0">
              <li class="article" 
                @click="toArticleHandler(a)"
                v-for="a in articleData.list" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul>
            <div v-else style="text-align:center;color:red;padding:2em">
              暂无数据
            </div>
            <!-- /文章列表 -->
            <!-- 分页 -->
            <div class="page">
               <el-pagination
                background
                layout="prev, pager, next"
                hide-on-single-page
                @current-change="pageChangeHandler"
                :page-size="articleData.pageSize"
                :total="articleData.total">
              </el-pagination>
            </div>
            <!-- /分页 -->
          </div>
          <div class="rank">
            <div class="title">热门</div>
            <ul class="articles">
              <li class="article"></li>
            </ul>
          </div>
        </div>
        <!-- 左侧内容 -->
        <!-- 右侧推荐 -->
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer></Footer>
    <!-- /底部 -->
  </div>
</template>
<script>
import Header from './components/Header'
import Footer from './components/Footer'
import { get } from '../utils/request'
export default {
  components:{
    Header,Footer
  },
  data(){
    return {
      loading:false,
      category:{},
      param:{
        page:1,
        pageSize:5
      },
      articleData:{
        list:[]
      }
    }
  },
  watch:{
    '$route.query':{
      handler(query){
        this.category = query;
        this.loadArticles();
      },
      deep:true
    }
  },
  created(){
    // 获取参数
    this.category = this.$route.query;
    this.loadArticles();
  },
  methods:{
    toArticleHandler(article){
      this.$router.push({
        path:'/article',
        query:{
          id:article.id,
          name:article.category?article.category.name:''
        }
      })
    },
    pageChangeHandler(page){
      this.param.page = page;
      this.loadArticles();
    },
    loadArticles(){
      this.loading = true;
      let url = "/index/article/pageQuery"
      this.param.categoryId = this.category.id;
      get(url,this.param).then(resp => {
        this.articleData = resp.data;
      }).finally(()=> {
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 变量
$color_primary:#028b39;
.list {
  .content {
    background-color: #ecf6f2;
    padding: 1em 0;

    .page_title {
      padding:.5em 0;
      font-size: 18px;
      font-weight: bold;
      color: $color_primary;
    }

    .inner_content {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      & > div {
        background-color: #fff;
        border-radius: 5px;
        padding: 1em .5em;
        min-height: 500px;
      }
      .articles{
        flex: 1;
        margin-right: 1em;

        ul > li.article {
          padding: .5em 0;
          border-bottom: 1px solid #ededed;
          & > div {
            line-height: 1.8em;
          }
          .title {
            cursor: pointer;
          }
        }
        .page {
          padding:.5em 0;
          text-align: center;
        }
      }
      .rank {
        flex-basis: 200px;
        position: relative;
        .title {
          position: absolute;
          left: 0;
          top: -1em;
          background-color: #ff7800;
          color:#fff;
          width: 4em;
          line-height: 1.6em;
          font-size: 16px;
          text-align: center;
        }
      }
      
    }
  }
}
</style>